<template>
  <div>
    <el-card shadow="always">
      <CategorySelector @categoryChange="categoryChange" style="margin-top:15px" ref="categorySelector" >
      </CategorySelector>
    </el-card>

    <el-card shadow="always" style="margin-top:20px">
      <div v-show="showList">
        <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addSpu">添加SPU</el-button>
        <el-table :data="tableData" border style="margin-top:10px" v-loading="loading" element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading">
          <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
          <el-table-column label="SPU名称" prop="spuName" align="center"></el-table-column>
          <el-table-column label="SPU描述" align="center" prop="description">

          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{row}">
              <HintButton title="添加SKU" type="primary" size="mini" icon="el-icon-plus"></HintButton>
              <HintButton title="修改SPU" type="primary" size="mini" icon="el-icon-edit" @click="toEdit(row)"></HintButton>
              <HintButton title="查看所有SKU" type="info" size="mini" icon="el-icon-warning-outline"></HintButton>
              <el-popconfirm :title="`确定删除${row.spuName}吗？`" @onConfirm="deleteSpu(row)">
                <HintButton title="删除SPU" type="danger" size="mini" icon="el-icon-delete" slot="reference"></HintButton>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align: center; margin-top:20px" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="page" :page-sizes="[5, 6,7,8]" :page-size="limit"
          layout=" prev, pager, next, jumper,->,sizes,total" :total="total">
        </el-pagination>
      </div>
      <AddOrUpdate v-show="!showList" ref="addOrUpdate"></AddOrUpdate>
    </el-card>
  </div>
</template>

<script>
  import AddOrUpdate from './addOrUpdate'
  export default {
    name: 'SpuList',
    data() {
      return {
        category1Id: null,
        category2Id: null,
        category3Id: null,
        tableData: [],
        page: 1,
        limit: 5,
        total: 0,
        loading: false,
        showList: true,
      }
    },
    methods: {
        //新增Spu
        addSpu(){
            this.showList = false
              //重置数据
            this.$refs.addOrUpdate.resetData()
            this.$refs.addOrUpdate.initAddData(this.category3Id)
        },
        //删除spu
        async deleteSpu(row){
            await this.$API.spu.deleteSpu(row.id)
            this.$message.success('删除成功')
            //更新界面
            this.getSpuByPage(this.page)
        },
        //显示列表界面,addOrUpdate来调用
        toShowList() {
        this.showList = true
        this.$refs.categorySelector.disabled = !this.showList
        },
        //编辑spu
        toEdit(row) {
        this.showList = false
        this.$refs.categorySelector.disabled = !this.showList
        this.$refs.addOrUpdate.initData(row.id,this.page)
        },
        //分页相关
        async handleSizeChange(limit) {
        this.limit = limit
        await this.getSpuByPage()
        },
        async handleCurrentChange(index) {
        await this.getSpuByPage(index)
        },
        //当三级分类任意一级改变时,会触发这个vue自定义事件
        categoryChange({
        categoryId,
        level
        }) {
        switch (level) {
            case 1:
            this.category1Id = categoryId
            this.category2Id = ''
            this.category3Id = ''
            this.tableData = []
            break;
            case 2:
            this.category2Id = categoryId
            this.category3Id = ''
            this.tableData = []
            break;
            case 3:
            this.category3Id = categoryId
            this.getSpuByPage();
            break;

        }
        },
        async getSpuByPage(index = 1) {
        this.page = index;
        const {
            page,
            limit,
            category3Id
        } = this
        this.loading = true
        const {data} = await this.$API.spu.getSpuByPage(page, limit, category3Id)
        this.loading = false
        this.tableData = data.records
        this.total = data.total
        }
    },
    components: {
      AddOrUpdate
    },
    // mounted() {
    //   this.getSpuByPage()
    // }
  }

</script>
